<template>
	<view class="page">
		<custom-navigation title="库存预警商品">
		</custom-navigation>


		<view class="flex-row-center"
			style="background-color: #38C09EFF;padding-top: 20rpx;padding-left: 24rpx;padding-bottom: 22rpx;">
			<view class="search-box flex-row-center">
				<image src="/static/search.png"></image>
				<input placeholder="商品名称、条形码、助记码" placeholder-style="color:#999999" v-model="name" @confirm="doSearch"
					confirm-type="search" type="text" @keydown.enter="doSearch" />
			</view>
			<view class="fliter-box" @click="$navigateTo('/pages/warehousing/warning/warning-filter')">
				<image src="/static/filter.png"></image>
				<text>筛选</text>
			</view>
		</view>


		<!-- 
			<view class="head-item flex-row-center">
				<view class="title">商品名称</view>
				<input class="value" style="text-align: right;" v-model="name" placeholder="请输入" /> 
			</view>

			<view class="head-item flex-row-center"
				@click="$navigateTo('/pages/goods/classify_goods?selectMode=true&isMultiple=true')">
				<view class="title">商品分类</view>
				<view :class="getClassifyName()?'value':'emptyvalue'">
					{{getClassifyName()||'请选择'}}
				</view>

				<image class="close-image" src="/static//close2.png" v-if="getClassifyName()"  @click.native.stop="goods_classify=[]"></image>
				<image src="/static/arrow-blackmin.png"></image>
			</view>

			<view class="head-item flex-row-center"
				@click="$navigateTo('/pages/goods/goods_brand?selectMode=true&isMultiple=true')">
				<view class="title">商品品牌</view>
				<view :class="getBrandName()?'value':'emptyvalue'">{{getBrandName()||'请选择'}}</view>
				<image class="close-image" src="/static//close2.png" v-if="getBrandName()"  @click.native.stop="brand=[]"></image>
				<image src="/static/arrow-blackmin.png"></image>
			</view>


			<view class="head-item flex-row-center"
				@click="$navigateTo('/pages/goods/goods_supplier?selectMode=true&isMultiple=true')">
				<view class="title">供应商</view>
				<view :class="getSupplierName()?'value':'emptyvalue'">{{getSupplierName()||'请选择'}}
				</view>
				<image class="close-image" src="/static//close2.png" v-if="getSupplierName()"  @click.native.stop="supplier=[]"></image>
				<image src="/static/arrow-blackmin.png"></image>
			</view>

			<picker :value="goodsTypeIndex" :range="goodsTypes" @change="e=>goodsTypeIndex = e.detail.value">
				<view class="head-item flex-row-center" v-if="isExpand">
					<view class="title">商品状态</view>
					<view :class="goodsTypeIndex==0?'emptyvalue':'value'">
						{{goodsTypeIndex!=0?goodsTypes[goodsTypeIndex]:'请选择'}}
					</view>
					<image src="/static/arrow-blackmin.png"></image>
				</view>

			</picker>
			<view class="head-item flex-row-center" v-if="isExpand">
				<view class="title">库存</view>
				<picker :value="stocy_rule_index" :range="stocy_rule_name"
					@change="e=>stocy_rule_index = e.detail.value">
					<view class="rule flex-row-center">
						{{stocy_rule_name[stocy_rule_index]}}
						<image src="/static/arrow-down.png"></image>
					</view>
				</picker>
				<input class="value" style="text-align: right;" v-model="stocy_num" placeholder="请输入" type="number" />
			 
			</view>
			<view class="head-item flex-row-center">
				<view style="flex: 1;"></view>
				<view class="expand flex-row-center" @click="isExpand=!isExpand">
					{{isExpand?'收起':'展开'}}
					<image :src="!isExpand?'/static//arrow-bottom.png':'/static//arrow-up.png'"></image>
				</view>
				<view class="btn" @click="doSearch">查询</view>
			</view>
			<view style="margin-top: 20rpx;"></view>
 -->

		<scroll-view scroll-y="true" class="body-scroll" @scrolltolower="loadMoreData">

			<view class="item-view" v-for="(item,index) in goodsList" @click="itemOnClick(item)">
				<view class="name">{{item.goods_name}}</view>
				<view class="flex-row-center" style="flex: 1;">
					<view style="flex: 1; margin: 4rpx 0;">供应商：{{item.supplier}}</view>
					<view>现有库存：{{item.stock_num}}</view>

				</view>
				<view class="flex-row-center" style="flex: 1;">
					<view style="flex: 1; margin: 4rpx 0;">条码：{{item.goods_barcode}}</view>
					<view>最低库存：{{item.min_stock}}</view>

				</view>
				<view class="flex-row-center">
					<view style="flex: 1;margin: 4rpx 0;">单位：{{item.goods_unit}}</view>
					<view>最高库存：{{item.max_stock}}</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		fatherAndSonUpdates,
		fatherAndSonAdds
	} from '@/common/api/parameter_tool.js'
	export default {
		data() {
			return {
				editGoodsDialogShow: false,
				currGoodsInfo: {},
				remarkDialogShow: false,
				title: "新增库存",
				remark: "",
				dialogRemark: "",
				currInputNum: '',
				currInputPrice: '',
				goodsList: [],
				info: null,
				name: '',
				goods_classify: [],
				brand: [],
				supplier: [],
				goodsTypeIndex: 0,
				goodsTypes: ["全部", "上架", "下架", "售馨"],
				stocy_num: '',
				stocy_rule_index: 0,
				stocy_rule_name: ["大于", '大于等于', '等于', '小于', '小于等于'],
				stocy_rule_no: ["gt", 'ge', 'eq', 'lt', 'le'],
				isExpand: false,
				page: 1,
				relation_condition: {
					"relation" : "AND",
					"data" : [
					]
				},
			}
		},
		onLoad(options) {
			this.getData()
		},
		onShow() {

			let relation_condition = uni.getStorageSync("relation_condition")
			if (relation_condition) {
				this.relation_condition = relation_condition
				uni.setStorageSync("relation_condition", null)
				uni.setStorageSync("condition", null)
				this.page = 1
				this.getData()
			}
 

		},
		methods: {
			getClassifyName() {
				let str = ''
				for (let i in this.goods_classify) {
					str += "," + this.goods_classify[i].classify_name
				}
				if (str.length > 0) str = str.substring(1)
				return str;
			},
			getBrandName() {
				let str = ''
				for (let i in this.brand) {
					str += "," + this.brand[i].brand_name
				}
				if (str.length > 0) str = str.substring(1)
				return str;
			},

			getSupplierName() {
				let str = ''
				for (let i in this.supplier) {
					str += "," + this.supplier[i].supplier_name
				}
				if (str.length > 0) str = str.substring(1)
				return str;
			},
			confirmEntry() {
				this.currGoodsInfo.warehousing_num = this.currInputNum;
				this.currGoodsInfo.purchase_price = this.currInputPrice;
				this.editGoodsDialogShow = false;
			},
			itemOnClick(item) {
				this.currGoodsInfo = item;
				this.currInputNum = this.currGoodsInfo.warehousing_num;
				this.currInputPrice = this.currGoodsInfo.purchase_price;
				this.editGoodsDialogShow = true;
			},
			rightAction() {
				this.remark = this.dialogRemark;
				this.remarkDialogShow = false;
			},
			getAllQty() {
				let countQty = 0;
				for (let i in this.goodsList) {
					countQty += parseInt(this.goodsList[i].warehousing_num ?? '0')
				}
				return countQty;
			},
			remove(index) {
				this.goodsList.splice(index, 1)
			},
			getAmount(item) {
				return (item.purchase_price ?? 0) * (item.warehousing_num ?? 1)
			},
			qrcode() {
				// this.qrcodeSearch("1667031567808")
				let ths = this;
				dsBridge.call("QRCode", {}, function(res) {
					if (res) {
						ths.qrcodeSearch(res)

					}
				})
			},
			qrcodeSearch(qrcode) {
				uni.showLoading({
					title: "加载中..."
				})
				this.$apiPost("/retail/select/srvretail_goods_info_select", {
					serviceName: "srvretail_goods_info_select",
					condition: [{
						"colName": "goods_barcode",
						"ruleType": "like",
						"value": qrcode
					}],
					page: {
						"pageNo": 1,
						"rownumber": 500
					},
					"colNames": ["*"]
				}).then(res => {
					uni.hideLoading()
					if (res.data.length > 0) {
						for (let i in this.goodsList) {
							if (this.goodsList[i].goods_barcode == qrcode) {
								this.goodsList[i].warehousing_num = (parseInt(this.goodsList[i].warehousing_num ??
									"1") + 1) + ""
								return;
							}
						}
						res.data[0].warehousing_num = "1"
						this.goodsList.push(res.data[0])
					} else {
						this.$showToast('没有找到该条码')
					}
				})
			},
			loadMoreData() {
				this.page++;
				this.getData()
			},
			doSearch() {
				this.page = 1;
				this.getData()
			},
			getData() {
				uni.showLoading({
					title: "加载中..."
				})


				let condition = []; 
				let relation_condition_temp = null;
				if(this.relation_condition){
					relation_condition_temp = JSON.parse(JSON.stringify(this.relation_condition));
				} else {
					relation_condition_temp = {
						"relation" : "AND",
						"data" : [
							// {
							// 	"relation" : "OR",
							// 	"data" : [
							// 		{
							// 			"colName" : "supplier",
							// 			"ruleType" : "like",
							// 			"value" : "晨光"
							// 		}
							// 	]
							// },
							// {
							// 	"relation" : "OR",
							// 	"data" : [
							// 		{
							// 			"colName" : "brand",
							// 			"ruleType" : "like",
							// 			"value" : "认养一头牛"
							// 		}
							// 	]
							// }
						]
					}
				}
				if (this.name.length > 0) {
					relation_condition_temp.data.push(
						{
							"relation": "OR",
							"data": [{
									"colName": "goods_name",
									"ruleType": "like",
									"value": this.name
								},{
									"colName": "goods_barcode",
									"ruleType": "like",
									"value": this.name
								},
								{
									"colName": "mnemonic_code",
									"ruleType": "like",
									"value": this.name
								}
							]
						}
					);
				}

			 

				this.$apiPost("/retail/select/srvretail_stock_early_warning_select", {
					"serviceName": "srvretail_stock_early_warning_select",
					"colNames": ["*"],
					"condition": condition,
					"relation_condition": relation_condition_temp || {},
					"page": {
						"pageNo": this.page,
						"rownumber": 20
					}
				}).then(res => {
					
					
					let list = [];
					if (this.name.length > 0) {
						for (let i in res.data) {
							if (res.data[i].goods_name?.indexOf(this.name) != -1) {
								list.push(res.data[i]);
							} else if (res.data[i].goods_barcode?.indexOf(this.name) != -1) {
								list.push(res.data[i]);
							} else if ((res.data[i].mnemonic_code ?? "").indexOf(this.name) != -1) {
								list.push(res.data[i]);
							}
						}
					} else
						list = res.data
					
					
				
					if (this.page == 1)
						this.goodsList = list;
					else {
						if (list == 0) {
							uni.showToast({
								title: "没有更多数据了。",
								icon: 'none'
							})
						}
						this.goodsList.push(...list)
					}
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.fliter-box {
		margin-right: 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.search-box {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 39rpx;

		}

		input {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			margin-left: 8rpx;
			color: #000;
		}
	}


	.head-contaienr {
		background-color: white;

		.item {
			padding: 20rpx 20rpx;

			.value {
				flex: 1;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}


		}

		.bluebtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(56, 192, 158, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.redbtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(212, 48, 48, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}
	}

	.head-item {
		padding-left: 20rpx;
		padding-right: 24rpx;
		min-height: 100rpx;
		background-color: white;
		margin-bottom: 2rpx;

		.btn {
			text-align: center;
			width: 140rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 8rpx;
			background: rgba(56, 192, 158, 1);
			margin-left: 80rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.expand {
			margin-left: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.rule {
			margin-left: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
			color: rgba(153, 153, 153, 1);

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.value {
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			text-align: right;
		}

		.emptyvalue {
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
		}

		image {
			margin-left: 16rpx;
			width: 8rpx;
			height: 16rpx;
		}

		.close-image {
			width: 40rpx;
			height: 40rpx;
		}

		.add-goods {
			box-sizing: content-box;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 60rpx;
			border: 1px solid rgba(212, 48, 48, 1);
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(212, 48, 48, 1);
		}
	}

	.remark-dialog {
		width: 560rpx;
		justify-content: center;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		padding-top: 34rpx;

		.title-box {
			font-size: 18px;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			position: relative;

			.text {
				width: 540rpx;
				text-align: center;
			}

			image {
				width: 52rpx;
				position: absolute;
				right: 10rpx;
				top: 0;
				height: 52rpx;
			}
		}

		.line {
			margin-top: 14rpx;
			height: 2rpx;
			width: 100%;
			background-color: rgba(225, 225, 225, 1);
		}

		.input {
			width: 464rpx;
			height: 210rpx;
			margin-left: 48rpx;
			margin-top: 44rpx;
			margin-bottom: 60rpx;
			border: 2rpx solid rgba(241, 241, 241, 1);
			padding: 20rpx;
			box-sizing: border-box;
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
			font-weight: 500;
		}


		.boottom-btn-box {
			width: 100%;
			height: 100rpx;
			border-radius: 0 0 20rpx 20rpx;
			font-size: 36rpx;
			font-weight: 700;
			border-top: 2rpx solid rgba(224, 222, 222, 1);

			.left-btn {
				flex: 1;
				line-height: 100rpx;
				text-align: center;
				color: rgba(56, 192, 158, 1);
				border-right: 1rpx solid rgba(224, 222, 222, 1);
			}

			.right-btn {
				flex: 1;
				line-height: 100rpx;
				text-align: center;
			}
		}
	}

	.total-box {
		padding-left: 24rpx;
		height: 80rpx;
		opacity: 1;
		background: rgba(227, 227, 227, 1);
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}

	.item-view {
		padding: 26rpx 20rpx 0 24rpx;
		padding-bottom: 18rpx;
		background: rgba(255, 255, 255, 1);
		border-bottom: 2rpx solid rgba(245, 245, 247, 1);
		;
		position: relative;

		.name {
			padding-bottom: 20rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);

		}

		view {
			flex: 0.7;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		image {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 24rpx;
			top: 66rpx;
		}
	}

	.qrcode-img {
		width: 140rpx;
		height: 140rpx;
		position: fixed;
		bottom: 268rpx;
		right: 24rpx;
	}

	.bottom-container {
		background-color: white;
		box-shadow: 0 -16rpx 16rpx 1rpx #00000008;
		height: 146rpx;
		padding: 0 24rpx;
		justify-content: space-around;

		.item {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;

		}

		.item1 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid rgba(56, 192, 158, 1);
			background-color: rgba(56, 192, 158, 1);
			color: white;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;

		}

		.btn {
			margin-right: 34rpx;
			width: 192rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(56, 192, 158, 1);
			font-size: 30rpx;
			font-weight: 700;
			color: white;
			text-align: center;
			line-height: 80rpx;
		}
	}


	.showDialog {
		animation: showDialog 0.3s ease-out;
		padding-top: 54rpx;
		width: 750rpx;
		border-radius: 40rpx 40rpx 0 0;
		background: rgba(255, 255, 255, 1);

		.r {
			padding-left: 44rpx;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);

			input {
				height: 48rpx;
				line-height: 48rpx;
				padding: 0 5rpx;
				text-align: center;
				opacity: 1;
				border-radius: 4rpx;
				border: 1px solid rgba(153, 153, 153, 1);
			}
		}

		.bottom-box {
			margin-top: 55rpx;
			box-shadow: 0 -32rpx 32rpx 2rpx rgba(245, 245, 247, 1);

			.cancel {
				flex: 1;
				height: 146rpx;
				line-height: 146rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: black;
				background-color: white;
			}

			.confirm {
				flex: 1;
				height: 146rpx;
				line-height: 146rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: white;
				background-color: rgba(56, 192, 158, 1);
				;
			}
		}

	}

	// 呼吸帧
	@keyframes showDialog {
		0% {
			transform: translate(0%, 100%);
		}

		100% {
			transform: translate(0%, 0%);
		}

	}

	.bottom {
		width: 100%;
		height: 146rpx;
		justify-content: center;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 -32rpx 32rpx 3rpx rgba(245, 245, 247, 1);
		z-index: 1;

		.text {
			flex: 1;
			font-size: 32rpx;
			font-weight: 700;
			margin-left: 24rpx;
			color: rgba(51, 51, 51, 1);
		}

		.btn2 {
			width: 320rpx;
			height: 80rpx;
			opacity: 1;
			margin-right: 100rpx;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
		}

		.btn {
			width: 320rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 40px;
			background: rgba(56, 192, 158, 1);
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			text-align: center;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>
